<template>
    <div class="hr-list__devices" v-if="room && room.devices">
        <div
            :class="['hr-list__devices__item', { 'hr-list__devices__item--narrow': narrow }]"
            v-for="device in room.devices"
            :key="device.id">

            <Tooltip
                v-if="device.cTooltipContent"
                placement="top"
                :content="device.cTooltipContent">
                <c-icon
                    :name="device.cIcon"
                    align="middle"
                    className="icon-huge"
                    @click="openDeviceDetail(device, room.id)"
                    :key="device.icon">
                </c-icon>
            </Tooltip>
            <c-icon
                v-else
                :name="device.cIcon"
                align="middle"
                className="icon-huge"
                @click="openDeviceDetail(device, room.id)"
                :key="device.icon">
            </c-icon>

            <div class="hr-list__devices__item__name">
                {{ device.cName }}
            </div>
        </div>
    </div>
</template>

<script>
    import bus from '@/libs/event-bus'

export default {
      name: 'device-list',
      props: {
        narrow: Boolean,
        homeId: Number,
        room: Object
      },
      methods: {
        openDeviceDetail (device) {
          // 传播到 home-detail.vue
          const deviceType = device.device_type >= 10 ? 'device' : device.device_type
          // 公区含有其他楼栋门禁设备使用this.room会导致room id错误
          bus.$emit('open-device' + this.homeId, device.room_id, deviceType, device.id, this.room.cRoomName || '公区', this.room, null, device)
        }
      }
    }
</script>

<style lang="less">
    @import url('./room-list.less');
</style>
